<!--基本漏斗图-->

<template>
  <div class="w-h-full">
    <!--组件遮罩层，用于在设计器中显示-->
    <div v-if="shade" class="shade"></div>

    <div v-resize="resizeHandle" style="width: 100%; height: 100%;">
      <div :id="'chart-'+component.id+'-'+chartDomNum" class="w-h-full"></div>
    </div>
  </div>
</template>

<script>

  import FuncCompMixin from '@/mixin/FuncCompMixin'
  import ChartCompMixin from '@/mixin/ChartCompMixin'
  import PnDesigner from '@/utils/PnDesigner'

  const _this = {
    name: 'BaseFunnelChart', // 此名称必须填写，且必须与组件文件名相同
    mixins: [FuncCompMixin, ChartCompMixin],
    attr: {
      version: '2.2',
      configDataTemp: Object.assign({

        // 组件相关配置属性，Echarts图表组件的相关配置属性，必须在chartOption对象下定义
        chartOption: {
          title: PnDesigner.buildTitleConfigData(),
          tooltip: {
            show: true,
            trigger: 'item',
            triggerOn: 'mousemove',
            axisPointer: {
              type: 'shadow'
            },
            backgroundColor: 'rgba(50,50,50,0.7)',
            padding: 5,
            borderWidth: 0,
            borderColor: '#333',
            textStyle: {
              color: '#fff',
              fontSize: 14
            }
          },
          legend: {
            show: false,
            position: 'top-center',
            orient: 'horizontal',
            textStyle: {
              color: 'rgb(144, 160, 174)',
              fontSize: 12
            },
            icon: 'roundRect'
          },

          funnel: {
            name: '漏斗图',

            color: [],

            top: 50,
            bottom: 20,
            width: '90%',
            min: 0,
            max: 100,
            minSize: '0%',
            maxSize: '100%',
            sort: 'descending',
            gap: 0,

            label: {
              show: true,
              position: 'inside',
              formatter: '(params) => {\n\treturn params.name\n}',
              color: '#fff',
              fontSize: 12,
              align: 'center',
              verticalAlign: 'middle',
              textShadowColor: '',
              textShadowBlur: 0
            },
            labelLine: {
              show: true,
              length: 10,
              lineStyle: {
                width: 1,
                type: 'solid'
              }
            },
            itemStyle: {
              borderColor: '#fff',
              borderWidth: 0,
              borderType: 'solid',
              shadowBlur: 0,
              shadowColor: ''
            }
          }
        }

      }, PnDesigner.buildFuncCompDatasourceField({ // 如果组件需要配置数据源，则需要调用此函数构建数据源字段对象
        ds_resultObjTemplate: [
          {
            field: 'name',
            remark: '类目'
          },
          {
            field: 'value',
            remark: '值'
          }
        ],
        ds_resultObj: [
          {name: '访问', value: 60},
          {name: '咨询', value: 40},
          {name: '订单', value: 20},
          {name: '点击', value: 80},
          {name: '展现', value: 100}
        ],
        ds_useFilter: true, // 是否使用过滤器，默认不使用
        ds_useTimer: true, // 是否开启定时器配置，默认不开启
      }), PnDesigner.buildFuncCompGlobalField(), PnDesigner.buildEchartCompCustomOption(), PnDesigner.buildFuncCompInteractionConfiguration())
    },
    data() {
      return {}
    },
    mounted() {
      this.init();

      this.setTimer(() => { //定时器，如果当前组件不使用定时器，可以将此段代码删除
        this.init()
      })
    },
    methods: {
      init() { // 组价初始化函数，函数名必须使用init，不可更改
        this.initDatasource(() => {
          this.chart.setOption(this.chartOption);
          this.runCustomGlobalJsCode();
          this.runDataItemClickJsCode()
        }, (result) => {
          this.chart.setOption(this.chartOption);
          this.runCustomGlobalJsCode();
          this.runDataItemClickJsCode()
        });
      }
    },
    computed: {
      chartOption() {

        let option = {
          title: PnDesigner.buildTitleChartOption(this.component.compConfigData.chartOption.title),
          tooltip: {
            show: this.component.compConfigData.chartOption.tooltip.show,
            trigger: this.component.compConfigData.chartOption.tooltip.trigger,
            triggerOn: this.component.compConfigData.chartOption.tooltip.triggerOn,
            axisPointer: {
              type: this.component.compConfigData.chartOption.tooltip.axisPointer.type
            },
            backgroundColor: this.component.compConfigData.chartOption.tooltip.backgroundColor,
            padding: this.component.compConfigData.chartOption.tooltip.padding,
            borderWidth: this.component.compConfigData.chartOption.tooltip.borderWidth,
            borderColor: this.component.compConfigData.chartOption.tooltip.borderColor,
            textStyle: {
              color: this.component.compConfigData.chartOption.tooltip.textStyle.color,
              fontSize: this.component.compConfigData.chartOption.tooltip.textStyle.fontSize
            }
          },
          legend: {
            show: this.component.compConfigData.chartOption.legend.show,
            left: this.$PnDesigner.buildChartLegendPosition(this.component.compConfigData.chartOption.legend.position).left,
            bottom: this.$PnDesigner.buildChartLegendPosition(this.component.compConfigData.chartOption.legend.position).bottom,
            orient: this.component.compConfigData.chartOption.legend.orient,
            textStyle: {
              color: this.component.compConfigData.chartOption.legend.textStyle.color,
              fontSize: this.component.compConfigData.chartOption.legend.textStyle.fontSize
            },
            icon: this.component.compConfigData.chartOption.legend.icon,
            data: []
          },

          series: [
            {
              name: '漏斗图',
              type: 'funnel',
              color: this.component.compConfigData.chartOption.funnel.color,
              left: 'center',
              top: this.component.compConfigData.chartOption.funnel.top,
              bottom: this.component.compConfigData.chartOption.funnel.bottom,
              width: this.component.compConfigData.chartOption.funnel.width,
              min: this.component.compConfigData.chartOption.funnel.min,
              max: this.component.compConfigData.chartOption.funnel.max,
              minSize: this.component.compConfigData.chartOption.funnel.minSize,
              maxSize: this.component.compConfigData.chartOption.funnel.maxSize,
              sort: this.component.compConfigData.chartOption.funnel.sort,
              gap: this.component.compConfigData.chartOption.funnel.gap,
              label: {
                show: this.component.compConfigData.chartOption.funnel.label.show,
                position: this.component.compConfigData.chartOption.funnel.label.position,
                formatter: this.component.compConfigData.chartOption.funnel.label.formatter.indexOf('(params') < 0 ? '{b}' :
                  eval(this.component.compConfigData.chartOption.funnel.label.formatter),
                color: this.component.compConfigData.chartOption.funnel.label.color,
                fontSize: this.component.compConfigData.chartOption.funnel.label.fontSize,
                align: this.component.compConfigData.chartOption.funnel.label.align,
                verticalAlign: this.component.compConfigData.chartOption.funnel.label.verticalAlign,
                textShadowColor: this.component.compConfigData.chartOption.funnel.label.textShadowColor,
                textShadowBlur: this.component.compConfigData.chartOption.funnel.label.textShadowBlur
              },
              labelLine: {
                show: this.component.compConfigData.chartOption.funnel.labelLine.show,
                length: this.component.compConfigData.chartOption.funnel.labelLine.length,
                lineStyle: {
                  width: this.component.compConfigData.chartOption.funnel.labelLine.lineStyle.width,
                  type: this.component.compConfigData.chartOption.funnel.labelLine.lineStyle.type
                }
              },
              itemStyle: {
                borderColor: this.component.compConfigData.chartOption.funnel.itemStyle.borderColor,
                borderWidth: this.component.compConfigData.chartOption.funnel.itemStyle.borderWidth,
                borderType: this.component.compConfigData.chartOption.funnel.itemStyle.borderType,
                shadowBlur: this.component.compConfigData.chartOption.funnel.itemStyle.shadowBlur,
                shadowColor: this.component.compConfigData.chartOption.funnel.itemStyle.shadowColor
              },
              // emphasis: {
              //   label: {
              //     fontSize: 20
              //   }
              // },
              data: []
            }
          ]
        };

        this.runCustomFilter(this.component.compConfigData.ds_resultObj).forEach(item => {
          option.legend.data.push(item.name);
          option.series[0].data.push(item)
        });

        // 下面这一段代码用于合并组件的扩展配置，如果组件不需要扩展配置，可以删掉
        option = this.$PnDesigner.mergeChartCustomOption(option, this.component.compConfigData.customOption);

        return option;
      }
    }
  };

  export default _this
</script>

<style scoped>

</style>
